import React, { Component } from 'react';
import { Menu } from 'antd';
import { MailOutlined } from '@ant-design/icons';
import styled from 'styled-components';
import { Link } from 'react-router-dom';
import { route } from '../../route/routes';
const { SubMenu } = Menu;
const NavBar = styled.div`
    width:256px;
    height:100vh;
    float:left;
`;
export default class NavigateLeft extends Component
{
    render()
    {
        return (
            <NavBar>
                <Menu
                    style={{ width: 256 }}
                    defaultSelectedKeys={['0']}
                    defaultOpenKeys={['sub1']}
                    mode="inline"
                >
                    <SubMenu key="sub1" icon={<MailOutlined />} title="ThreeJS Study Route">
                        {
                            route.map((item: any, index: any) =>
                            {
                                return (
                                    <Menu.Item key={index}>
                                        <Link to={item.path}>{item.title}</Link>
                                    </Menu.Item>
                                );
                            })
                        }
                    </SubMenu>
                </Menu>
            </NavBar>
        );
    }
}
